<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="wrap">
        <!-- 头部开始 -->
        <header id="header">
            <!-- 头部的上半部 -->
            <div class="headTop">
                <!-- 版心 -->
                <div class="headTopMain">
                    <!-- 左边 -->
                    <div class="left">
                        <h5>欢迎来到尚品汇！ 请</h5>
                        <div class="login">
                            <a href="javascript:;">登录</a>
                            <a href="javascript:;">注册</a>
                        </div>
                    </div>
                    <!-- 右边 -->
                    <nav class="right">
                        <a href="javascript:;">我的订单</a>
                        <a href="javascript:;">我的购物车</a>
                        <a href="javascript:;">我的尚品汇</a>
                        <a href="javascript:;">尚品汇会员</a>
                        <a href="javascript:;">企业采购</a>
                        <a href="javascript:;">关注尚品汇</a>
                        <a href="javascript:;">合作招商</a>
                        <a href="javascript:;">商家后台</a>
                    </nav>
                </div>
            </div>
            <!-- 头部的下半部 -->
            <div class="headBottom">
                <!-- 版心 -->
                <div class="headBottomMain">
                    <!-- 左边：logo -->
                    <h1 class="logo">
                        <a href="javascript:;">
                            <img src="./images/Logo.png" alt="">
                        </a>
                    </h1>
                    <!-- 右边:搜索框-->
                    <div class="search">
                        <input type="text" placeholder="请输入搜索内容">
                        <input type="button" value="搜索">
                    </div>
                </div>
            </div>
        </header>
        <!-- 头部结束 -->
        <!-- 导航开始 -->
        <div id="navWrap">
            <!-- 版心 -->
            <div class="navMain">
                <h3>全部商品分类</h3>
                <nav class="navList">
                    <a href="javascript:;">服装城</a>
                    <a href="javascript:;">美妆馆</a>
                    <a href="javascript:;">尚品汇超市</a>
                    <a href="javascript:;">全球购</a>
                    <a href="javascript:;">闪购</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">有趣</a>
                    <a href="javascript:;">秒杀</a>
                </nav>
            </div>
        </div>
        <!-- 导航结束 -->
        <!-- 内容区域开始 -->
        <div id="contentWrap">
            <!-- 版心 -->
            <div class="contentMain">
                <!-- 路径部分开始 -->
                <div class="pathNav">

                </div>
                <!-- 路径部分结束 -->
                <!-- 放大镜区域开始 -->
                <div class="bigPicWrap">
                    <!-- 左边 -->
                    <div class="left">
                        <!-- 左边上半部 -->
                        <div class="leftTop">
                            <!-- 小图 -->
                            <div class="smallImg">
                                <img src="./images/s1.png" alt="">
                                <!-- 蒙版：默认没有 -->
                            </div>
                            <!-- 大图：默认没有 -->
                        </div>
                        <!-- 左边下半部 -->
                        <div class="leftBottom">
                            <a href="javascript:;" class="prev">&lt;</a>
                            <div class="imgWarp">
                                <ul>

                                </ul>
                            </div>
                            <a href="javascript:;" class="next">&gt;</a>
                        </div>
                    </div>
                    <!-- 右边 -->
                    <div class="right">
                        <!-- 上半部 -->
                        <div class="rightTop">

                        </div>
                        <!-- 下半部 -->
                        <div class="rightBottom">
                            <!-- 选择出来的区域：默认啥都没有 -->
                            <div class="choosed"></div>
                            <!-- 选择区域 -->
                            <div class="chooseWarp">

                            </div>
                            <!-- 加入购物车 -->
                            <div class="addCart">
                                <div class="addCount">
                                    <input type="text">
                                    <a href="javascript:;" class="add">+</a>
                                    <a href="javascript:;" class="jian">-</a>
                                </div>
                                <button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 放大镜区域结束 -->
                <!-- 选项卡区域开始 -->
                <div class="tabWrap">
                    <!-- 左边是侧边栏 -->
                    <div class="left">
                        <!-- 选项卡按钮区域 -->
                        <div class="tabBtns">
                            <h4 class="active">相关分类</h4>
                            <h4>推荐品牌</h4>
                        </div>
                        <!-- 选项卡内容区域 -->
                        <div class="tabConts">
                            <div class="active">
                                <ul class="goodsList">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>iphone配件</li>
                                    <li>贴膜</li>
                                    <li>手机耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                </ul>
                                <ul class="goodsList2">
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                </ul>

                            </div>
                            <div>推荐品牌内容</div>
                        </div>
                    </div>
                    <!-- 右边：选择搭配 详情区域 -->
                    <div class="right">
                        <!-- 选择搭配 -->
                        <div class="chooseSuit">
                            <h4 class="chooseTitle">选择搭配</h4>
                            <div class="chooseContent">
                                <div class="chooesLeft">
                                    <img src="./images/l-m01.png" alt="">
                                    <p>¥5299</p>
                                    <span>+</span>
                                </div>
                                <ul class="chooesMiddle">
                                    <li>
                                        <img src="./images/dp01.png" alt="">
                                        <p>Feless费勒斯VR</p>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./images/dp02.png" alt="">
                                        <p>Feless费勒斯VR</p>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./images/dp03.png" alt="">
                                        <p>Feless费勒斯VR</p>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="./images/dp04.png" alt="">
                                        <p>Feless费勒斯VR</p>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="chooesRight">
                                    <div>已购0件商品</div>
                                    <p>套餐价</p>
                                    <span>¥5299</span>
                                    <div class="button">
                                        <button>加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 详情 -->
                        <div class="detailWrap">
                            <!-- 选项卡按钮区域 -->
                            <ul class="tabBtns">
                                <li class="active"><a href="javascript:;">商品介绍</a></li>
                                <li class=""><a href="javascript:;">规格包装</a></li>
                                <li class=""><a href="javascript:;">售后与保障</a></li>
                                <li class=""><a href="javascript:;">商品评价</a></li>
                                <li class=""><a href="javascript:;">手机社区</a></li>
                            </ul>
                            <!-- 选项卡内容区域 -->
                            <div class="tabContents">
                                <div class="active">
                                    <ul>
                                        <li>分辨率：1920*1080(FHD)</li>
                                        <li>后置摄像头：1200万像素</li>
                                        <li>前置摄像头：500万像素</li>
                                        <li>核 数：其他</li>
                                        <li>频 率：以官网信息为准</li>
                                        <li>品牌： Apple</li>
                                        <li>商品名称：APPLEiPhone 6s Plus</li>
                                        <li>商品编号：1861098</li>
                                        <li>商品产地：中国大陆</li>
                                        <li>商品毛重：0.51kg</li>
                                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                        <li>系统：苹果（IOS）</li>
                                        <li>像素：1000-1600万品毛重：0.51kg</li>
                                        <li>机身内存：64GB</li>
                                    </ul>
                                    <img src="./images/intro01.png" alt="">
                                    <img src="./images/intro02.png" alt="">
                                    <img src="./images/intro03.png" alt="">
                                </div>
                                <div>规格包装内容</div>
                                <div>售后与保障内容</div>
                                <div>商品评价内容</div>
                                <div>手机社区内容</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 选项卡区域结束 -->

            </div>
        </div>
        <!-- 内容区域结束 -->
        <!-- 右边侧边栏开始 --> 
        <!-- 默认其实是关闭的 -->
        <aside class="rightAside close">  
            <!-- 按钮区域 -->
            <div class="btn btnClose"></div>
            <!-- 内容区域 -->
            <div class="content"></div>
            <!-- 侧导航 -->
            <ul class="list">
                <li>
                    <i></i>
                    <p>尚品会员</p>
                </li>
                <li>
                    <i></i>
                    <p>尚品会员</p>
                </li>
                <li>
                    <i></i>
                    <p>尚品会员</p>
                </li>
                <li>
                    <i></i>
                    <p>尚品会员</p>
                </li>
                <li>
                    <i></i>
                    <p>尚品会员</p>
                </li>
                <li>
                    <i></i>
                    <p>尚品会员</p>
                </li>
            </ul>
        </aside>
        <!-- 右边侧边栏结束 -->


    </div>

    <script src="./js/data.js"></script>
    <script>
        window.onload = function () {
            //  声明一个变量：用来保存大图片的下标
            var bigImgIndex = 0;

            // 右边侧边栏的逻辑
            rightAsideBind();
            function rightAsideBind(){
                // 获取按钮元素
                var btn = document.querySelector('#wrap .rightAside .btn')
                // 获取侧边栏元素
                var rightAside = document.querySelector('#wrap .rightAside')

                var flag = true; //默认是关闭的
                // 给按钮元素添加点击事件
                btn.onclick = function(){
                    if(flag){  //是关闭的，需要打开
                        btn.className = 'btn btnOpen'
                        rightAside.className = 'rightAside open'

                    }else{  //是打开的，需要关闭
                        btn.className = 'btn btnClose'
                        rightAside.className = 'rightAside close'
                    }

                    flag = !flag;
                }

            }
            


            // 选择搭配的价格变化
            chooseSuitPrice();
            function chooseSuitPrice(){
                // 获取左边的价格元素
                var leftP = document.querySelector('#wrap #contentWrap .contentMain .tabWrap .right .chooseSuit .chooseContent .chooesLeft p')
                // 获取中间对选框元素
                var checkboxs = document.querySelectorAll('#wrap #contentWrap .contentMain .tabWrap .right .chooseSuit .chooseContent .chooesMiddle li > div input')
                // 获取右边的价格元素
                var rightP = document.querySelector('#wrap #contentWrap .contentMain .tabWrap .right .chooseSuit .chooseContent .chooesRight span')

                // 计算价格的逻辑
                // 左边的价格 + 中间选中的价格 = 右边的价格

                // 遍历 绑定点击事件
                for(var i = 0;i < checkboxs.length ; i++){
                    checkboxs[i].onclick = function(){
                        // 获取左边的价格
                        var leftPrice = Number(leftP.innerHTML.slice(1));
                        
                        // 如果对选框选中，则计算价格
                        for(var j = 0;j < checkboxs.length ; j++){
                            if(checkboxs[j].checked){
                                leftPrice = leftPrice + Number(checkboxs[j].value);
                            }
                        }

                        // 给右边的价格元素添加上去
                        rightP.innerHTML = '￥' + leftPrice;

                    }
                }

            }


            // 左边侧边栏的逻辑（选项卡）
            leftAside();
            function leftAside() {
                // 获取选项卡按钮元素
                var tabBtns = document.querySelectorAll('#wrap #contentWrap .contentMain .tabWrap .left .tabBtns h4')
                // 获取选项卡内容区域元素
                var tabContents = document.querySelectorAll('#wrap #contentWrap .contentMain .tabWrap .left .tabConts > div')
                
                // 调用 tab 函数
                tab(tabBtns,tabContents) 
            }

            // 详情区域的逻辑 （选项卡）
            detailBind();
            function detailBind() {
                // 获取选项卡按钮元素
                var btns = document.querySelectorAll('#wrap #contentWrap .contentMain .tabWrap .right .detailWrap .tabBtns li')
                // 获取选项卡内容区域元素
                var conts = document.querySelectorAll('#wrap #contentWrap .contentMain .tabWrap .right .detailWrap .tabContents > div')

                // 调用 tab 函数
                tab(btns,conts) 

            }

            // 单独封装一个选项卡逻辑 （tab逻辑）
            function tab(tabBtns,tabContents) {
                // 遍历 tabBtns ， 添加点击事件
                for (var i = 0; i < tabBtns.length; i++) {
                    // 保存按钮区域的下标
                    tabBtns[i].index = i;
                    tabBtns[i].onclick = function () {
                        // 把 所有的 tabBtns 元素恢复成原来的样子
                        for (var j = 0; j < tabBtns.length; j++) {
                            tabBtns[j].className = '';
                            tabContents[j].className = '';
                        }
                        // 点击谁，谁添加 active 类名
                        this.className = 'active'
                        tabContents[this.index].className = 'active';
                    }
                }
            }

            // 放大镜右边上半部数据添加
            bigImgRightTopData();
            function bigImgRightTopData() {
                // 获取元素
                var rightTop = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .right .rightTop')

                // 获取数据
                var data = goodData.goodsDetail;

                // 模板字符串
                var str = `
                            <h4>${data.title}</h4>
                            <p>${data.recommend}</p>
                            <div class="priceWrap">
                                <div class="priceTop">
                                    <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                                    <div class="price">
                                        <span>￥</span>
                                        <em>${data.price}</em>
                                        <i>降价通知</i>
                                    </div>
                                    <div class="count">累计评价 ${data.evaluateNum}</div>
                                </div>
                                <div class="priceBottom">
                                    <div class="title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                                    <p>
                                        <span>${data.promoteSales.type}</span>
                                        <span>${data.promoteSales.content}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="supportAddress">
                                <div class="address">
                                    <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                                    <div class="cont">${data.support}</div>
                                </div>
                                <div class="support">
                                    <div class="title">配&nbsp;送&nbsp;至</div>
                                    <div class="cont">${data.address}</div>
                                </div>
                            </div>
            `;


                rightTop.innerHTML = str;
            }


            // 放大镜右边下半部数据添加
            bigImgRightBottomData();
            function bigImgRightBottomData() {
                // 获取元素
                var chooseWarp = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .right .rightBottom .chooseWarp')
                // 获取数据
                var crumbData = goodData.goodsDetail.crumbData;

                // 遍历 crumbData
                for (var i = 0; i < crumbData.length; i++) {
                    // 创建 dl
                    var dl = document.createElement('dl');
                    // 创建dt
                    var dt = document.createElement('dt');
                    dt.innerHTML = crumbData[i].title;
                    dl.appendChild(dt);
                    chooseWarp.appendChild(dl);

                    // 遍历 crumbData[i].data
                    for (var j = 0; j < crumbData[i].data.length; j++) {
                        // 创建 dd
                        var dd = document.createElement('dd');
                        dd.innerHTML = crumbData[i].data[j].type;
                        // 4.1 给 dd 添加价格变化的属性
                        dd.setAttribute('changePrice', crumbData[i].data[j].changePrice)
                        dl.appendChild(dd)
                    }

                }

            }


            // 放大镜右边点击dd的逻辑
            // 1.点击dd,实现排他
            // 2.点击dd，出现被选择区域
            // 2.1 准备一个数组，数组的长度与dl长度一致，数组默认值为0
            // 2.2 点击dd,获取到点击的这个dd的父元素dl的下标
            //      因为dl下标与数组的下标是一一对应关系
            //      根据刚刚dl的下标找到数组对应的位置，把dd内容添加进去
            // 2.3 遍历数组，判断数组中的每一个元素
            //     如果是0,不用管；  如果有具体的文本信息，创建元素，在被选取区域出现即可
            // 2.4 点击dd一开始，需要把被选择区域中的内容清空
            // 3.点击 删除按钮 a
            // 点击删除元素，a元素的父元素 mark 消失
            //     数组的对应位置需要恢复成默认值0
            // 点击删除元素，对应的dl区域的dd元素实现排他效果
            //     只有第一个dd变红色，其他的dd变成#666
            // 4.价格变化
            //  点击 dd , 点击 X 的时候价格会发生变化
            // 上边原有的价格 + 点击dd或者点击X 变化的价格 = 最终价格

            clickDD();
            function clickDD() {
                // 获取被选择区域的元素
                var choosed = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .right .rightBottom .choosed')
                // 获取 dl 元素
                var dlNodes = document.querySelectorAll('#wrap #contentWrap .contentMain .bigPicWrap .right .rightBottom .chooseWarp dl')
                // 2.1 准备一个数组，数组的长度与dl长度一致，数组默认值为0
                var arr = new Array(dlNodes.length);
                arr.fill(0)  //数组填充

                // 循环，遍历
                for (var i = 0; i < dlNodes.length; i++) {
                    (function (i) {
                        // 获取 dl 下面对应的子元素 dd
                        var ddNodes = dlNodes[i].querySelectorAll('dd')

                        // 给 dd 添加点击事件
                        for (var j = 0; j < ddNodes.length; j++) {
                            ddNodes[j].onclick = function () {
                                //  2.4 点击dd一开始，需要把被选择区域中的内容清空
                                choosed.innerHTML = '';
                                // 排他效果
                                // 把所有的dd恢复成原有的样子
                                for (var k = 0; k < ddNodes.length; k++) {
                                    ddNodes[k].style.color = '#666'
                                }
                                // 点击哪个dd，哪个dd 变色
                                this.style.color = 'red'

                                // 2.2 点击dd,获取到点击的这个dd的父元素dl的下标
                                // dl的下标其实就是 i
                                // 根据刚刚dl的下标找到数组对应的位置，把dd内容添加进去
                                // arr[i] = this.innerHTML;
                                // 4.2 数组中的内容变成 dd
                                arr[i] = this;

                                // 4.调用价格变化的函数
                                changePrice(arr);

                                //  2.3 遍历数组，判断数组中的每一个元素
                                // 如果有具体的文本信息，创建元素，在被选取区域出现即可
                                // ['黑色',0,'移动版',0]
                                // 4.3 [dd,0,dd,0]
                                arr.forEach(function (item, index) {
                                    if (item) {
                                        // 创建div元素
                                        var mark = document.createElement('div')
                                        mark.className = 'mark';
                                        // mark.innerHTML = item;
                                        //  4.3 
                                        mark.innerHTML = item.innerHTML;

                                        // 创建a元素（删除元素）
                                        var aNode = document.createElement('a');
                                        aNode.innerHTML = 'X';
                                        mark.appendChild(aNode);
                                        // 3.4 保存 a 元素的下标
                                        aNode.setAttribute('num', index)

                                        choosed.appendChild(mark);
                                    }
                                })

                                // 3.1获取删除的a元素
                                var deleteNodes = document.querySelectorAll('#wrap #contentWrap .contentMain .bigPicWrap .right .rightBottom .choosed .mark a')

                                // 3.2 给 每一个 删除的a元素 添加点击事件
                                for (var m = 0; m < deleteNodes.length; m++) {
                                    deleteNodes[m].onclick = function () {
                                        // 3.3 点击删除元素，a元素的父元素 mark 消失
                                        choosed.removeChild(this.parentNode);
                                        // 3.5 获取 点击这个a元素的下标
                                        var AIndex = this.getAttribute('num');
                                        //3.6 数组的对应位置需要恢复成默认值0
                                        arr[AIndex] = 0;

                                        // 4.调用价格变化的函数
                                        changePrice(arr);

                                        //3.7 点击删除元素，对应的dl区域的dd元素实现排他效果
                                        // 获取 dd
                                        var dds = dlNodes[AIndex].querySelectorAll('dd')

                                        // 3.8 实现排他 ：只有第一个dd变红色，其他的dd变成#666
                                        for (var n = 0; n < dds.length; n++) {
                                            dds[n].style.color = '#666'
                                        }
                                        dds[0].style.color = 'red';



                                    }
                                };


                            }
                        }

                    })(i);


                }


            }

            // 价格变化的函数
            function changePrice(arr) {   //arr = [dd,0,dd,0]
                // 获取上边的价格元素
                var PNode = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .right .rightTop .priceWrap .priceTop .price em')
                // 上边原有的价格 + 点击dd或者点击X 变化的价格 = 最终价格
                // 获取原有的价格
                var price = goodData.goodsDetail.price; //5299

                // 遍历 arr
                arr.forEach(function (item, index) {
                    if (item) {
                        price = price + Number(item.getAttribute('changePrice'));
                    }
                })

                // 把最终的价格给上边元素添加上去
                PNode.innerHTML = price;

                // 上面是处理上边价格的
                // ----------------------------
                // 下面是处理价格联动逻辑的
                // 获取元素
                // 获取左边的价格元素
                var leftP = document.querySelector('#wrap #contentWrap .contentMain .tabWrap .right .chooseSuit .chooseContent .chooesLeft p')
                // 获取中间对选框元素
                var checkboxs = document.querySelectorAll('#wrap #contentWrap .contentMain .tabWrap .right .chooseSuit .chooseContent .chooesMiddle li > div input')
                // 获取右边的价格元素
                var rightP = document.querySelector('#wrap #contentWrap .contentMain .tabWrap .right .chooseSuit .chooseContent .chooesRight span')


                // 价格联动
                // 左边的价格 = 上边的价格
                leftP.innerHTML = '￥' + price;
                // 右边的价格 = 左边的价格 + 中间的价格
                for(var i = 0 ; i < checkboxs.length;i++){
                    if(checkboxs[i].checked){
                        price = price + Number(checkboxs[i].value);
                    }
                }
                rightP.innerHTML = '￥' + price;

            }



            // 缩略图数据动态添加的逻辑
            thumbnailData();
            function thumbnailData() {
                // 获取元素
                var ul = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftBottom .imgWarp ul')
                // 获取数据
                var imagessrc = goodData.imagessrc;

                // 遍历
                for (var i = 0; i < imagessrc.length; i++) {
                    // 创建 li
                    var liNode = document.createElement('li')
                    // 创建 img
                    var img = document.createElement('img');
                    img.src = imagessrc[i].s;
                    liNode.appendChild(img);
                    ul.appendChild(liNode)
                }

            }


            // 缩略图点击逻辑
            thumbnailClick();
            function thumbnailClick() {
                // 点击左右的按钮逻辑
                // 获取元素
                var prev = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftBottom a.prev')
                var next = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftBottom a.next')
                var liNodes = document.querySelectorAll('#wrap #contentWrap .contentMain .bigPicWrap .left .leftBottom .imgWarp ul li')
                var ul = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftBottom .imgWarp ul')
                // 每点击一次，走两张图片（每一次移动的距离）
                var everyLeft = (liNodes[0].offsetWidth + 20) * 2;
                // 当前的位置
                var nowLeft = 0;
                // 总距离
                // 方式一：ul宽度 - div的宽度
                // 方式二：（总图片数 - 5）* (liNodes[0].offsetWidth + 20) 
                var sumLeft = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20);

                // 点击 next 按钮 : ul 往前走
                next.onclick = function () {
                    nowLeft += everyLeft;

                    if (nowLeft > sumLeft) {
                        nowLeft = sumLeft;
                    }

                    // 确定 ul 的位置
                    ul.style.left = -nowLeft + 'px';
                }

                // 点击 prev 按钮
                prev.onclick = function () {
                    nowLeft -= everyLeft;
                    if (nowLeft < 0) {
                        nowLeft = 0
                    }
                    // 确定 ul 的位置
                    ul.style.left = -nowLeft + 'px';

                }

                // 点击 图片的逻辑
                // 获取元素
                var smallImg = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftTop .smallImg img')
                // 获取数据的数组
                var imagessrc = goodData.imagessrc;
                // 默认状态下，小图片 是 数组中的第一个路径
                smallImg.src = imagessrc[0].s;


                // 遍历 liNodes ，添加点击事件
                for (var i = 0; i < liNodes.length; i++) {
                    // 保存li下标
                    liNodes[i].index = i;
                    liNodes[i].onclick = function () {
                        // 点击li，对应的小图片要发生变化
                        // 有 liNodes 的下标 与 数据的数组下标是 一一对应关系
                        // 我们可以吧 li下标先保存起来，
                        // 拿到保存的下标，去数据的数组中找对应的元素即可
                        smallImg.src = imagessrc[this.index].s;

                        // 点击这个li的下标是谁啊？
                        // console.log(this.index)

                        // 点击li，对应的大图片要发生变化
                        // 把 li的下标给 大图片下标 赋值上去
                        bigImgIndex = this.index;

                    }
                }




            }





            // 放大镜的逻辑
            bigPicBind();
            function bigPicBind() {
                // 获取元素
                var smallPic = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftTop .smallImg')
                var leftTop = document.querySelector('#wrap #contentWrap .contentMain .bigPicWrap .left .leftTop')

                // 获取数据
                var imagessrc = goodData.imagessrc;

                // 鼠标移入事件
                smallPic.onmouseenter = function () {
                    // 蒙版区域出来
                    var mask = document.createElement('div');
                    mask.className = 'mask';
                    smallPic.appendChild(mask)
                    // 大图区域出来
                    var bigImgWrap = document.createElement('div')
                    bigImgWrap.className = 'bigImgWrap';
                    var bigImg = document.createElement('img')
                    // bigImg.src = './images/b1.png';
                    bigImg.src = imagessrc[bigImgIndex].b;
                    bigImgWrap.appendChild(bigImg);
                    leftTop.appendChild(bigImgWrap);

                    // 鼠标移动事件
                    smallPic.onmousemove = function (event) {
                        // 蒙版发生移动 --- 确定 蒙版的 left top 值
                        // 蒙版的位置：鼠标到屏幕左侧的距离 - 小图区域到屏幕左侧的距离 - 蒙版宽度的一半
                        var left = event.clientX - smallPic.getBoundingClientRect().left - mask.offsetWidth / 2;
                        var top = event.clientY - smallPic.getBoundingClientRect().top - mask.offsetHeight / 2;
                        // 限定范围
                        if (top < 0) {
                            top = 0;
                        } else if (top > smallPic.clientHeight - mask.offsetHeight) {
                            top = smallPic.clientHeight - mask.offsetHeight
                        }
                        if (left < 0) {
                            left = 0;
                        } else if (left > smallPic.clientWidth - mask.offsetWidth) {
                            left = smallPic.clientWidth - mask.offsetWidth
                        }

                        mask.style.left = left + 'px';
                        mask.style.top = top + 'px';

                        // 大图片发生移动  --- 确定 大图片 的 left  top
                        // 比例 = 蒙版移动的距离/大图片移动的距离 = (小图区域的宽度-蒙版整体的宽度)/(大图片宽度-大图框的宽度)
                        var scale = (smallPic.clientWidth - mask.offsetWidth) / (bigImg.offsetWidth - bigImgWrap.clientWidth);

                        bigImg.style.left = - left / scale + 'px';
                        bigImg.style.top = - top / scale + 'px';

                    }

                    // 鼠标移出事件
                    smallPic.onmouseleave = function () {
                        smallPic.onmousemove = smallPic.onmouseleave = null;
                        // 蒙版区域消失
                        smallPic.removeChild(mask)
                        // 大图区域消失
                        leftTop.removeChild(bigImgWrap)

                    }
                }



            }


            // 路径导航数据添加
            pathNavBind();
            function pathNavBind() {
                // 获取元素
                var pathNav = document.querySelector('.pathNav')

                // 获取数据
                var data = goodData.path;

                // 遍历
                for (var i = 0; i < data.length; i++) {
                    if (i === data.length - 1) {
                        // 这是最后一次循环
                        // 创建 a 元素
                        var aNode = document.createElement('a')
                        aNode.innerHTML = data[i].title;
                        pathNav.appendChild(aNode)
                    } else {
                        // 创建 a 元素
                        var aNode = document.createElement('a')
                        aNode.innerHTML = data[i].title;
                        aNode.href = data[i].url;
                        pathNav.appendChild(aNode)
                        // 创建 i 元素
                        var iNode = document.createElement('i');
                        iNode.innerHTML = '/'
                        pathNav.appendChild(iNode)
                    }


                }


            }


        };
    </script>
</body>

</html>